<template>
  <lay-container class="flex-center">
    <div class="container-demo">
      <div class="QRcode">
        <!-- 二维码部分 -->
        <div class="qrcodes">
          <lay-qrcode text="http://www.layui-vue.com" width="230" background="true" backgroundColor="#f0f0f0"></lay-qrcode>
        </div>
        <div class="choose">
          <div class="social-login">
            <div class="social-item">
              <img src="../login/img/wx.svg" alt="WeChat" />
              <span>微信登录</span>
            </div>
            <div class="social-item">
              <img src="../login/img/QQ.svg" alt="QQ" />
              <span>QQ登录</span>
            </div>
          </div>
        </div>
      </div>
      <div class="dividingline">
        <!-- 分割线 -->
      </div>
      <div class="password">
        <div class="passfont">
          <div @click="isPasswordLogin = true" class="login-switch">密码登录</div>
          <div>|</div>
          <div @click="isPasswordLogin = false" class="login-switch">短信登录</div>
        </div>
        <!-- 根据 isPasswordLogin 来决定显示哪个组件 -->
        <div class="login-container" style="height: 300px;">
          <PasswordLogin v-if="isPasswordLogin" @login-success="emitLoginSuccess"/>
          <Smslogin v-else/>
        </div>
      </div>
    </div>
  </lay-container>
</template>
<script setup>
import { ref } from 'vue';
import "./Login.css"
import PasswordLogin from "./passwordLogin/Passwordlogin.vue";
import Smslogin from "./smslogin/Smslogin.vue";

// 用于控制显示哪个登录方式
const isPasswordLogin = ref(true);  // 默认为密码登录

// emit 用于向父组件发送事件
const emit = defineEmits();

// 登录成功时通知父组件
const emitLoginSuccess = () => {
  emit("login-success");
};
</script>